<div class="white-bg padding-lg padding-top">
    <div class="flex justify-between">
        <div class="text-title">工单详情</div>
        <div>
            <button type="button" class="btn btn-primary btn-sm" v-on:click="_printRepairDetail()">
                <vc:i18n name="打印" namespace="repairDetail"></vc:i18n>
            </button>
            <button type="button" class="btn btn-primary btn-sm" v-on:click="_goBack()">
                <vc:i18n name="返回" namespace="repairDetail"></vc:i18n>
            </button>
        </div>
    </div>
    <div class="margin-top">
        <div class="row">
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="工单编码：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairId}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="报修类型：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairTypeName}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="报修人：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairName}}</label>
                </div>
            </div>

            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="联系方式：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.tel}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="位置：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairObjName}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="预约开始时间：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.appointmentTime}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="预约结束时间：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.timeout}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="提单时长：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.submitHours|| '0'}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="完成时间：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.finishTime || '-'}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="状态：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.stateName}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="报修内容：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.context}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label"
                        v-if="repairDetailInfo.maintenanceType != null && repairDetailInfo.maintenanceType != ''">
                        <vc:i18n name="维修类型:" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="" v-if="repairDetailInfo.maintenanceType == '1001'">
                        <vc:i18n name="有偿服务" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="" v-if="repairDetailInfo.maintenanceType == '1002'">
                        <vc:i18n name="无偿服务" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="" v-if="repairDetailInfo.maintenanceType == '1003'">
                        <vc:i18n name="需要用料" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="" v-if="repairDetailInfo.maintenanceType == '1004'">
                        <vc:i18n name="无需用料" namespace="repairDetail"></vc:i18n>
                    </label>
                </div>
            </div>

            <div class="col-sm-3"
                v-if="repairDetailInfo.maintenanceType == '1001' || repairDetailInfo.maintenanceType == '1003'">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="用料：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairMaterials}}</label>
                </div>
            </div>
            <div class="col-sm-3" v-if="repairDetailInfo.maintenanceType == '1001'">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="费用明细：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairFee}}
                        <span>
                            <vc:i18n name="元(单价*数量)" namespace="repairDetail"></vc:i18n>
                        </span>&nbsp;&nbsp;
                    </label>
                </div>
            </div>
            <div class="col-sm-3" v-if="repairDetailInfo.appraiseScore != '0'">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="综合评价得分：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.appraiseScore}}
                        <span>
                            <vc:i18n name="分" namespace="repairDetail"></vc:i18n>
                        </span>
                    </label>
                </div>
            </div>

            <div class="col-sm-3" v-if="repairDetailInfo.doorSpeedScore != '0'">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="上门速度评分：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.doorSpeedScore}}
                        <span>
                            <vc:i18n name="分" namespace="repairDetail"></vc:i18n>
                        </span>
                    </label>
                </div>
            </div>
            <div class="col-sm-3" v-if="repairDetailInfo.repairmanServiceScore != '0'">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="维修员服务评分：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.repairmanServiceScore}}
                        <span>
                            <vc:i18n name="分" namespace="repairDetail"></vc:i18n>
                        </span>
                    </label>
                </div>
            </div>
            <div class="col-sm-3" v-if="repairDetailInfo.average != '0.0'">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="平均分：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.average}}
                        <vc:i18n name="分" namespace="repairDetail"></vc:i18n>
                    </label>
                </div>
            </div>
        </div>
        <div class="row" v-if="repairDetailInfo.visitType">
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="回访满意度：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.visitType=='1001'?'满意':'不满意'}}</label>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="form-group">
                    <label class="col-form-label">
                        <vc:i18n name="回访内容：" namespace="repairDetail"></vc:i18n>
                    </label>
                    <label class="">{{repairDetailInfo.visitContext}}</label>
                </div>
            </div>

        </div>
    </div>
    <div class="vc-line-primary margin-top"></div>
    <div class="margin-top-sm">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:repairDetailInfo._currentTab == 'repairDetailPhotos'}"
                    v-on:click="changeTab('repairDetailPhotos')">
                    <vc:i18n name="工单图片" namespace="repairDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:repairDetailInfo._currentTab == 'repairDetailUser'}"
                    v-on:click="changeTab('repairDetailUser')">
                    <vc:i18n name="工单流转" namespace="repairDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:repairDetailInfo._currentTab == 'repairDetailEvent'}"
                    v-on:click="changeTab('repairDetailEvent')">
                    <vc:i18n name="工单事件" namespace="repairDetail"></vc:i18n>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" v-bind:class="{active:repairDetailInfo._currentTab == 'repairDetailResource'}"
                    v-on:click="changeTab('repairDetailResource')">
                    <vc:i18n name="维修物品" namespace="repairDetail"></vc:i18n>
                </a>
            </li>
            
        </ul>
    </div>

    <div v-if="repairDetailInfo._currentTab == 'repairDetailPhotos'">
        <vc:create path="work/repairDetailPhotos"></vc:create>
    </div>
    <div v-if="repairDetailInfo._currentTab == 'repairDetailResource'">
        <vc:create path="work/repairDetailResource"></vc:create>
    </div>
    <div v-if="repairDetailInfo._currentTab == 'repairDetailUser'">
        <vc:create path="work/repairDetailUser"></vc:create>
    </div>
    <div v-if="repairDetailInfo._currentTab == 'repairDetailEvent'">
        <vc:create path="work/repairDetailEvent"></vc:create>
    </div>
    
    
    
    <vc:create path="common/viewImage"></vc:create>
    <vc:create path="property/replyRepairAppraise"></vc:create>
</div>